<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滚动条-scrollbar-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
	.s1 {
		position: relative;
		width: 160px;
		height: 200px;
		border: 1px solid #e2e2e2;
		margin: 0 auto 10px;
		overflow: hidden;
	}
	.s1 .box {
		width: 150px;
		height: 200px;
	}
	.s1 .content {
		width: 100%;
	}
	.s1 .content li {
		height: 40px;
		border-bottom: 1px dashed #e2e2e2;
		line-height: 40px;
		text-index: 0.5em;
	}
	.s1 .track {
		position: absolute;
		top: 0;
		right: 0;
		width: 4px;
		height: 100%;
	}
	.s1 .track div {
		width: 4px;
		background: #999;
		border-radius: 2px;
	}
	.s2 {
		position: relative;
		width: 500px;
		border: 1px solid #e2e2e2;
		margin: 0 auto 10px;
		overflow: hidden;
	}
	.s2 .box {
		width: 100%;
		height: 200px;
	}
	.s2 .content ul {
		width: 10000px;
	}
	.s2 .content li {
		float: left;
		width: 250px;
		height: 200px;
		border-right: 1px dashed #e2e2e2;
		line-height: 40px;
		text-index: 0.5em;
	}
	.s2 .track {
		width: 100%;
		height: 4px;
	}
	.s2 .track div {
		height: 4px;
		background: #999;
		border-radius: 2px;
	}
	</style>
	<script type="text/javascript" src="../code/scrollbar.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">
		<div class="scrollbar s1 sllb1">
			<div class="box">
				<ul class="content">
					<li>这里是内容1</li>
					<li>这里是内容2</li>
					<li>这里是内容3</li>
					<li>这里是内容4</li>
					<li>这里是内容5</li>
					<li>这里是内容6</li>
					<li>这里是内容7</li>
					<li>这里是内容8</li>
					<li>这里是内容9</li>
					<li>这里是内容10</li>
					<li>这里是内容11</li>
					<li>这里是内容12</li>
					<li>这里是内容13</li>
					<li>这里是内容14</li>
					<li>这里是内容15</li>
				</ul>
			</div>
			<div class="track"><div></div></div>
		</div>
		<div class="code">
			<p>
				执行默认参数，支持移动端触摸事件，pc拖拽滚动条，滚动区域鼠标可滚动。不传参数默认纵向滚动条。
			</p>
			<p>new scrollbar(".sllb1");</p>
		</div>
		<script type="text/javascript">
			new scrollbar(".sllb1");
		</script>
		<div class="scrollbar s2 sllb2">
			<div class="box">
				<ul class="content">
					<li>这里是内容1</li>
					<li>这里是内容2</li>
					<li>这里是内容3</li>
					<li>这里是内容4</li>
					<li>这里是内容5</li>
					<li>这里是内容6</li>
					<li>这里是内容7</li>
					<li>这里是内容8</li>
					<li>这里是内容9</li>
					<li>这里是内容10</li>
					<li>这里是内容11</li>
					<li>这里是内容12</li>
					<li>这里是内容13</li>
					<li>这里是内容14</li>
					<li>这里是内容15</li>
				</ul>
			</div>
			<div class="track"><div></div></div>
		</div>
		<div class="code">
			<p>
				{direction:'x'},滚动条的方向,"x"为横向,执行默认参数，支持移动端触摸事件，pc拖拽滚动条，滚动区域鼠标可滚动。不传参数默认纵向滚动条。
			</p>
			<p>new scrollbar(".sllb2",{direction:'x'});</p>
		</div>
		<script type="text/javascript">
			new scrollbar(".sllb2",{direction:'x'});
		</script>

		<div class="scrollbar s2 sllb3">
			<div class="box">
				<ul class="content">
					<li>这里是内容1</li>
					<li>这里是内容2</li>
					<li>这里是内容3</li>
					<li>这里是内容4</li>
					<li>这里是内容5</li>
					<li>这里是内容6</li>
					<li>这里是内容7</li>
					<li>这里是内容8</li>
					<li>这里是内容9</li>
					<li>这里是内容10</li>
					<li>这里是内容11</li>
					<li>这里是内容12</li>
					<li>这里是内容13</li>
					<li>这里是内容14</li>
					<li>这里是内容15</li>
				</ul>
			</div>
			<div class="track"><div></div></div>
		</div>
		<h1>回调函数方法：</h1>
		<div class="code">
			<p>
				设置滚动到指定位置,获得滚轴和内容区的转换比
			</p>
			<p>
<pre>
new scrollbar(".sllb3",{direction:'x'},function(api){
	api.slide(1210);
	var getRa= api.getRatio();
	//console.log(getRa)//0.13280212483399734
});
</pre>
			</p>
		</div>
		<script type="text/javascript">
			new scrollbar(".sllb3",{direction:'x'},function(api){
				api.slide(1210);
				var getRa= api.getRatio();
				//console.log(getRa)//0.13280212483399734
			});
		</script>

		<div class="example">
			<div class="call">
				<h1>调用方法：</h1>
				<p>new scrollbar("selector",options,callback(api));</p>
			</div>
			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="80">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>contentCls</td>
						<td>content</td>
						<td>轮播内容列表的class</td>
					</tr>
					<tr class="even">
						<td>trackCls</td>
						<td>track</td>
						<td>滑块的class</td>
					</tr>
					<tr>
						<td>direction</td>
						<td>'y'</td>
						<td>滚动条的方向</td>
					</tr>
					<tr class="even">
						<td>steps</td>
						<td>50</td>
						<td>滚动鼠标中轴的单位</td>
					</tr>
					<tr>
						<td>touchable</td>
						<td>true</td>
						<td>是否允许触摸操作</td>
					</tr>
					<tr class="even">
						<td>autoReset</td>
						<td>true</td>
						<td>窗体变化是否重置</td>
					</tr>
					<tr>
						<td>inEndEffect</td>
						<td>false</td>
						<td>滚轴到底时事件是否冒泡给页面</td>
					</tr>
					<tr class="even">
						<td>slide</td>
						<td>0</td>
						<td>默认移动的距离</td>
					</tr>
				</tbody>
			</table>
			<h2>callback(api)参数</h2>
			<table>
				<thead>
					<tr>
						<th width="200">方法</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>slide(move)</td>
						<td>滚动到指定位置</td>
					</tr>
					<tr class="even">
						<td>resize()</td>
						<td>重置滚动条参数</td>
					</tr>
					<tr>
						<td>getRatio()</td>
						<td>获得滚轴和内容区的转换比</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>